<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { trainingGetMyMessageById, trainingReadMessage } from '/api/provide';

const { proxy } = getCurrentInstance();
const eventChannel = proxy.getOpenerEventChannel()
const data = ref({});

onLoad(async ({ id }) => {
	uni.showLoading();
	const res = await trainingGetMyMessageById({ msgId: id });
	data.value = res?.data || {};
	await trainingReadMessage({ msgId: id, type: 0 });
	uni.hideLoading();
	eventChannel.emit('setRead');
});
</script>

<template>
	<view class="page">
		<view class="header">
			<text class="title">{{ data.msgTitle }}</text>
			<view class="time">
				<image src="/static/svg/time-full.svg" />
				<text>{{ data.createTime }}</text>
			</view>
		</view>
		<text class="content" space="nbsp">{{ data.msgContent }}</text>
	</view>
</template>

<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	box-sizing: border-box;
}

.header {
	padding-bottom: 40rpx;
	margin-bottom: 40rpx;
	border-bottom: 1rpx solid #E5E7EB;

	.title {
		font-size: 34rpx;
		font-weight: bold;
		color: #111827;
	}

	.time {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		gap: 14rpx;

		image {
			width: 24rpx;
			height: 24rpx;
		}

		text {
			font-size: 24rpx;
			color: #6B7280;
		}
	}
}

.content {
	color: #374151;
	line-height: 46rpx;
}
</style>
